window.onload=function(){
    var paging = document.querySelector('.paging')
    var uls = paging.children
    var lis = uls[0].children
    for(var i = 0;i<lis.length;i++){
        lis[i].onclick=function(){
            for(var y=0;y<lis.length;y++){
                lis[y].style.background='white'
            }
            this.style.background='#f47983'
        }
    }
    function animate(obj,target){
        clearInterval(obj.timer)
        obj.timer = setInterval(function(){
            var step = (target-obj.offsetLeft)/10
            step = step>0?Math.ceil(step):Math.floor(step)

            if(obj.offsetLeft == target){
                clearInterval(obj.timer);
            }

            obj.style.left=obj.offsetLeft+step+"px" 
        },30)
    }
    var bottons = document.querySelector('.add')
    var addBooks = document.querySelector('.add-book')
    bottons.addEventListener('click',function(){
        addBooks.style.display = "block"
        animate(addBooks,0)
    })

    var delete_add = document.querySelector('.delete')
    delete_add.addEventListener('click',function(){
        animate(addBooks,-1500)
    })

    var delete_book = document.querySelector('.delete-book')
    var delete_botton = document.querySelector('.delete-button')
    var de = document.querySelector('.dele')
    delete_botton.addEventListener('click',function(){
        delete_book.style.display = "block"
        animate(delete_book,0)
    })
    de.addEventListener('click',function(){
        animate(delete_book,1500)
        delete_book.style.display="none"
    })
}